<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .search {
                position: relative;
                width: 178px;
                margin: 100px;
            }

            .con {
                display: none;
                position: absolute;
                top: -40px;
                width: 171px;
                border: 1px solid rgba(0, 0, 0, .2);
                box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
                padding: 5px 0;
                font-size: 18px;
                line-height: 20px;
                color: #333;
            }

            .con::before {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: 28px;
                left: 18px;
                border: 8px solid #000;
                border-style: solid dashed dashed;
                border-color: #fff transparent transparent;
            }
        </style>
    </head>
    <body>
        <div class="search">
            <div class="con"></div>
            <input type="text" placeholder="请输入您的快递单号" class="jd">
        </div>
        <script type="text/javascript">
            var con = document.querySelector('.con');
            var ipt = document.querySelector('.jd');
            ipt.addEventListener('keyup', function() {
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerHTML = this.value;
                }
            })
            ipt.onfocus = function() {
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                }
            }
            ipt.onblur = function() {
                con.style.display = 'none';
            }
        </script>
    </body>
</html>
